<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#box {
				position: relative;
				width: 480px;
				margin: 10px auto
			}
			
			ul {
				height: 670px;
			}
			
			li {
				list-style: none;
				width: 480px;
				height: 670px;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
			
			img {
				width: 100%;
				height: 100%;
			}
			
			i {
				width: 30px;
				height: 30px;
			}
			
			.show {
				opacity: 1;
			}
			
			span {
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: #DDDDDD;
				cursor: pointer;
			}
			
			#btn {
				width: 480px;
				position: absolute;
				display: flex;
				justify-content: center;
				bottom: 20px;
				z-index: 10;
				left: 0 height: 30px;
			}
			
			.active {
				background: #FF0000;
			}
			#direction{justify-content:space-between;display:flex ;position: absolute;top: 40%;width: 100%;}
			p{width: 60px;height: 40px;display: block;font: 30px/40px "";text-align: center;background: rgba(255,255,255,.5);color: #666666;}
		</style>
	</head>

	<body>
		<div id="box">
			<ul id="list">
				<li class="show"><img src='img/fdf.jpg' /></li>
				<li><img src="img/qwe.jpg" /></li>
				<li><img src="img/qwqw.jpg" /></li>
				<li><img src="img/qww.jpg" /></li>
				<li><img src="img/timg.jpg" /></li>
				<li><img src="img/wq.jpg" /></li>
			</ul>
			<div id="btn">
				<span class="active"></span><i></i>
				<span></span><i></i>
				<span></span><i></i>
				<span></span><i></i>
				<span></span>
			</div>
			<div id="direction">
				<p><</p>
				<p>></p>
			</div>
		</div>

	</body>
	<script>
		window.onload = function() {
			var oList = document.getElementById('list')
			var oLi = oList.getElementsByTagName('li');
			var oSpan = (document.getElementById('btn')).getElementsByTagName('span');
			clickpage();

			function autoPlay() {
				
			}





			function clickpage() {
				for(var i = 0; i < oSpan.length; i++) {
					oSpan[i].num = i;
					console.log(oSpan);
					oSpan[i].onclick = function() {
						for(var j = 0; j < oSpan.length; j++) {
							oSpan[j].className = '';
							oLi[j].className = '';
						}
						console.log(this)
						this.className = 'active';
						oLi[this.num].className = 'show';
					}
				}
			}

		}
	</script>

</html>